﻿<pre>
知识点一：DOM概念
	Document,Object,Model文档对象模型，DOM模型给我们动态控制HTML提供了无限自由。
	用途：例如不同时间显示不同网页，动态添加、修改，删除HTML元素等。
	
1、再识HTML的结构
	 	document:{
	 		html:{
	 			head:{
	 				
	 			}
	 			
	 			body:{
	 				div:{
	 					width:"100px"
	 				}
	 			}
	 		}
	 	}

	说明：
	仔细观察html文档，结构其实可以用js对象来描述完全没问题。
	其中每个对象都可以被称为一个节点。
	
2、节点的概念
	一个DOM文档是有很多个小的单元组成的一个大集合，这些小单元我们称为节点。

3、常用节点类型
	DOM中把节点分为十二种类型常用的有以下几种类型。
	3.1、元素节点
	3.2、属性节点
	3.3、文本节点
	3.9、document
	3.11、文档片段(fragment)
	
	

例如：<a href="http://www.phpdl.com" title="标题">这里的文字就是文本节点</a>
那么： <a>标签就是元素节点
	  href及title就是属性节点
	    链接词里面的文字就是文本节点。

知识点二：访问节点
	认识节点后，如何控制他们就是dom模型章节的重点，DOM中最最常用的访问节点的两个方法。
	1、getElementById()
	2、getElementsByTagName()
	
	<h1 id="Dh1">富强</h1>
	<h1 id="Dh2">民主</h1>
<script>
 
/*
	getElementById(ID)返回指定ID的元素对象，标准的HTML中要求ID必须唯一。
	代码示例：
*/
 
var obj1 = document.getElementById("Dh1");
var obj2 = document.getElementById("Dh2");

//alert(obj1.innerText + obj2.textContent);	//输出 ,在谷歌下
/*
IE老版本只认： innerText，火狐只认：textContent， 新版本都认：textContent
*/
/* 
	getElementsByTagName(TagName);
	功能：获取相同元素名的对象集合。
	代码示例：
*/

var hlist = document.getElementsByTagName("h1");
//alert( hlist[0].textContent );	//输出 富强

//用途举例：动态批量修改样式
for(p in hlist){
	hlist[p].style.color="#ff0000";
	hlist[p].style.border="5px #ff0000 solid";
	hlist[p].style.width = "300px";
	hlist[p].style.borderRadius = "30px";
}
 

</script>
 
注意：
	很多JS代码需要HTML文档加载完毕后才能正确获取对应元素，所以一般都把JS放到最后,或用onload事件判断页面是否加载完毕。
 
</pre>